<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <script src="../layui/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="layui-container">
    <button class="layui-btn layui-btn-primary" onclick="openDialog()">新增</button>
    <table class="layui-table">
        <colgroup>
            <col width="200">
            <col width="150">
            <col width="150">
            <col width="150">
            <col width="150">
        </colgroup>
        <thead>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品分类</th>
            <th>商品库存</th>
            <th>供 货 商</th>
        </tr>
        </thead>
        <tbody id="product-list">
        <!-- 使用Thymeleaf循环展示当前用户的商品数据 -->
        <tr th:each="product : ${products}">
            <td th:text="${product.productName}"></td>
            <td th:text="${product.productPrice}"></td>
            <td>
                <span th:each="category : ${categories}" th:if="${category.categoryId == product.productCategoryId}"
                      th:text="${category.categoryName}"></span>
            </td>
            <td th:text="${product.productLeft}"></td>
            <td th:text="${getuserRealname}"></td>
        </tr>
        <!-- 如果商品列表为空，显示提示信息 -->
        <tr th:if="${#lists.isEmpty(products)}">
            <td colspan="4">暂无商品信息</td>
        </tr>
        </tbody>
    </table>

    <div id="add-product-form" style="display: none;">
        <form class="layui-form" lay-filter="add-product-form">
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="productName" required lay-verify="required" placeholder="请输入商品名称"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-block">
                    <input type="text" name="productPrice" required lay-verify="required" placeholder="请输入商品价格"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品库存</label>
                <div class="layui-input-block">
                    <input type="text" name="productLeft" required lay-verify="required" placeholder="请输入商品库存"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">供 货 商</label>
                <div class="layui-input-block">
                    <input type="hidden" name="productUseRealname" th:value="${getuserRealname}">
                    <span th:text="${getuserRealname}"></span> <!-- 可以显示当前用户的真实姓名 -->
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品分类</label>
                <div class="layui-input-block">
                    <select name="productCategoryId" lay-verify="required">
                        <option value="">请选择商品分类</option>
                        <!-- 使用Thymeleaf循环展示商品分类数据 -->
                        <option th:each="category : ${categories}" th:value="${category.categoryId}"
                                th:text="${category.categoryName}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" type="submit" lay-submit lay-filter="add-product">确认新增</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script>
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var isSubmitting = false; // 添加一个标志位，表示是否正在提交中
        var dialogIndex; // 定义一个变量用于存储弹窗的索引

        // 定义表单提交的 AJAX 请求
        form.on('submit(add-product)', function (data) {
            if (isSubmitting) {
                return false; // 如果已经在提交中，则忽略后续重复请求
            }

            isSubmitting = true; // 设置提交状态为 true

            var formData = data.field;
            console.log("现在开始打印请求" + formData);

            $.ajax({
                type: 'POST',
                url: '/kamun/product/productInsertByUser',
                data: JSON.stringify(formData),
                contentType: 'application/json',
                success: function (response) {
                    layer.close(dialogIndex); // 关闭弹窗
                    location.reload();
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                    layer.close(dialogIndex); // 关闭弹窗
                },
                complete: function () {
                    isSubmitting = false; // 在请求完成后，重置提交状态为 false
                }
            });

            return false;
        });

        // 打开弹窗
        openDialog = function () {
            dialogIndex = layer.open({
                type: 1,
                title: '新增商品',
                content: $('#add-product-form'),
                area: ['500px', '400px'],
                success: function (layero, index) {
                    form.render();
                },
                end: function () {
                    form.val('add-product-form', { // 重置表单
                        "productName": "",
                        "productPrice": "",
                        "productLeft": "",
                        "productCategoryId": ""
                    });
                    $('#add-product-form').hide(); // 隐藏表单
                    layer.closeAll();
                }
            });
        };
    });

</script>
</body>
</html>
